<template>
  <div>
    <div><i class="el-icon-star-on"></i>基础信息</div>
    <r-list
      :ColsNum="7"
      :width="120"
      :ListCols="ListCols"
      ListType="Info"
      :ListData="ListData"
    ></r-list>
    <div class="mtb20 "><i class="el-icon-star-on"></i>商品信息</div>
    <r-table
      :isPagination="false"
      :isHandle="false"
      :tableData="tableData"
      :tableCols="tableCols"
      :isSelection="false"
      @refresh="init"
    >
    </r-table>

    <div style="text-align: right;color:red;">
      <span>{{ tableBottom.title }}：{{ tableBottom.content }}</span>
    </div>
    <div class="mt20"><i class="el-icon-star-on"></i>费用信息</div>
    <r-list
      :ColsNum="5"
      :ListCols="ListColsFeiyong"
      ListType="Info"
      :ListData="ListDataFeiyong"
    ></r-list>
    <div class="mt20"><i class="el-icon-star-on"></i>商品核销</div>
    <r-list
      :ColsNum="5"
      :ListCols="ListColsHexiao"
      ListType="Info"
      :ListData="ListDataHexiao"
    ></r-list>
    <div class="mt20"><i class="el-icon-star-on"></i>订单利润分成</div>
    <r-list
      :ColsNum="3"
      :ListCols="ListColsFencheng"
      ListType="Info"
      :ListData="ListDataFencheng"
    ></r-list>
    <div v-if="ListDataShouhou" class="mt20">
      <i class="el-icon-star-on"></i>售后信息
    </div>
    <r-list
      v-if="ListDataShouhou"
      :ColsNum="3"
      :ListCols="ListColsShouhou"
      ListType="Info"
      :ListData="ListDataShouhou"
    ></r-list>
    <div class="mt20 mb20"><i class="el-icon-star-on"></i>订单日志</div>
    <r-table
      :tableData="tableDataLog"
      :tableCols="tableColsLog"
      style="height:400px"
      @refresh="init()"
    ></r-table>
    <!-- <r-form :formRules="formRules" :formHandle="formHandle" :formData="formData" :formCols="formCols" ref="elForm" labelWidth="200px" dialogWidth="1000px" :isHandle="true" /> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      //基础信息
      ListCols: [
        [
          {
            label: "Order Nnumber",
            prop: "orderNo"
          },
          {
            label: "订单Status",
            prop: "state",
            formatter: e =>
              e.state == 0
                ? "已创建"
                : e.state == 1
                ? "待接单"
                : e.state == 2
                ? "待配送"
                : e.state == 3
                ? "已送达"
                : e.state == 4
                ? "Completed"
                : e.state == 5
                ? "已销毁"
                : e.state == 6
                ? "已Cancel"
                : e.state == 7
                ? "申请售后"
                : e.state == 8
                ? "已退款"
                : e.state == 9
                ? "不退款"
                : e.state == 10
                ? "已超时"
                : e.state == 255
                ? "售后订单"
                : ""
          },
          {
            label: "下单User",
            prop: "nickName"
          },
          {
            label: "Phone码",
            prop: "phone"
            // color: "#f00",
            // formatter: e => e == 1 ? "已处理" : '未处理'
          },
          {
            label: "Payment方式",
            prop: "payType",
            formatter: e =>
              e.payType == 1
                ? "WeChatPayment"
                : e.payType == 2
                ? "AlipayPayment"
                : e.payType == 3
                ? "Balance"
                : ""
          },
          {
            label: "PaymentMoney",
            prop: "actuallyPaidMoney",
            formatter: e => "￥" + e.actuallyPaidMoney
          },
          {
            label: "Payment时间",
            prop: "payTime"
          },
          {
            label: "Device Number",
            prop: "equipmentNo"
          },
          {
            label: "设备地址",
            prop: "address"
          },
          {
            label: "Belonging Agent商",
            prop: "agentName"
          },
          {
            label: "所属商家",
            prop: "merchantName"
          },
          {
            label: "配送员",
            prop: "distributorName"
          },
          {
            label: "配送员电话",
            prop: "distributorPhone"
          }
        ]
      ],
      ListData: {},
      //费用信息Data
      ListDataFeiyong: {},
      //费用信息
      ListColsFeiyong: [
        [
          {
            label: "商品合计",
            prop: "copeMoney",
            formatter: e => "￥" + e.copeMoney
            // theme: e => e.status ? 'primary' : 'danger', type: "tag",
          },
          {
            label: "优惠Money",
            prop: "favorableMoney",
            formatter: e => "￥" + e.favorableMoney
          },
          {
            label: "应付款Money",
            prop: "actuallyPaidMoney",
            formatter: e => "￥" + e.actuallyPaidMoney
          },
          {
            label: "退款Money",
            prop: "refundMoney",
            formatter: e => "￥" + e.refundMoney
          },
          {
            label: "退款时间",
            prop: "refundTime"
          }
        ]
      ],
      //商品核销信息Data
      ListDataHexiao: {
        cancelCode: "123",
        sizeID: "123",
        etime: "10:00"
      },
      //商品核销信息
      ListColsHexiao: [
        [
          {
            label: "核销码",
            prop: "openCode"
            // theme: e => e.status ? 'primary' : 'danger', type: "tag",
          },
          {
            label: "尺寸编号",
            prop: "doorNo"
          },
          {
            label: "占柜到期时间",
            prop: "timeOut"
          },
          {
            label: "",
            prop: ""
          },
          {
            label: "",
            prop: ""
          }
        ]
      ],
      //订单分成利润
      ListDataFencheng: {},
      //订单分成利润信息
      ListColsFencheng: [
        [
          {
            label: "商品合计",
            prop: "money",
            // theme: e => e.status ? 'primary' : 'danger', type: "tag",
            formatter: e => (e && e.money ? "￥" + e.money : "￥" + "0")
          },
          {
            label: "分成Money",
            prop: "money",
            // theme: e => e.status ? 'primary' : 'danger', type: "tag",
            formatter: e => (e && e.money ? "￥" + e.money : "￥" + "0")
          },
          {
            label: "Operator分成",
            prop: "operatorBonusInfo",
            formatter: e =>
              (e &&
                e.operatorBonusInfo &&
                "￥" + JSON.parse(e.operatorBonusInfo).profit) ||
              "￥0"
          },
          {
            label: "Agent分成",
            prop: "regionalBonusInfo.profit",
            formatter: e =>
              (e &&
                e.regionalBonusInfo &&
                "￥" + JSON.parse(e.regionalBonusInfo).profit) ||
              "￥0"
          },
          {
            label: "商家分成",
            prop: "merchantBonusInfo.profit",
            formatter: e =>
              (e &&
                e.merchantBonusInfo &&
                "￥" + JSON.parse(e.merchantBonusInfo).profit) ||
              "￥0"
          }
        ]
      ],
      //订单售后Data
      ListDataShouhou: {},
      //订单售后信息
      ListColsShouhou: [
        [
          {
            label: "反馈内容",
            prop: "remark"
            // theme: e => e.status ? 'primary' : 'danger', type: "tag",
          },
          {
            label: "售后图片",
            prop: "picture",
            type: "img",
            imglook: true
          },
          {
            label: "Application Time",
            prop: "createdTime"
          },
          {
            label: "处理Status",
            prop: "state",
            formatter: e =>
              e.state == 0
                ? "未退款"
                : e.state == 1
                ? "已退款"
                : e.state == 2
                ? "退款Failure"
                : ""
          },
          {
            label: "处理结果",
            prop: "refundMoney",
            type: "button",
            // isShow:e=>e.state==0?true:false,
            formatter: e =>
              this.ListDataShouhou["state"] == 1
                ? `退款${e.refundMoney}元`
                : "-",
            showText: true,
            btnisShow: e => (this.ListDataShouhou["state"] == 0 ? true : false),
            btnList: [
              {
                label: "处理",
                type: "primary",
                handle: e => this.showFrom()
              }
            ]
          },
          {
            label: "处理时间",
            prop: "updatedTime"
          }
        ]
      ],
      //日志Data
      tableDataLog: [
        {
          content: "123",
          operator: "123",
          cTime: "123"
        }
      ],
      //日志信息
      tableColsLog: [
        {
          label: "Operations内容",
          prop: "content"
        },
        {
          label: "Operations人",
          prop: "operator"
        },
        {
          label: "Creation Time",
          prop: "createdTime"
        }
      ],
      // 商品Data
      tableData: [],
      // 商品信息
      tableCols: [
        {
          label: "商品图片",
          prop: "img",
          type: "image"
          // theme: e => e.status ? 'primary' : 'danger', type: "tag",
        },
        // {
        //     label: '商品分类',
        //     prop: 'goodsClassfy'
        // },
        {
          label: "商品Name",
          prop: "goodsName"
        },
        // {
        //     label: '商品Type',
        //     prop: 'goodsType',
        //     formatter: e => e.goodsType == 1 ? '计件' : '称重'
        // },
        // {
        //     label: '单位',
        //     prop: 'unit'
        // },
        {
          label: "单价",
          prop: "price"
        },
        // {
        //     label: '折扣价',
        //     prop: 'discount'
        // },
        {
          label: "数量",
          prop: "num"
        },
        {
          label: "小计",
          prop: "subtotal"
        }
      ],
      //合计栏
      tableBottom: {
        title: "合计",
        content: "￥100",
        textAlign: "right",
        color: "#f00",
        titleColor: "#000"
      },
      formData: {
        orderPrice: "",
        returnPrice: ""
      },
      formCols: [
        {
          type: "readonly",
          label: "订单PaymentMoney",
          width: 350,
          prop: "orderPrice"
        },
        { type: "input", label: "退款Money", width: 350, prop: "returnPrice" }
      ],
      formRules: {
        orderPrice: [{ required: false, message: "", trigger: "blur" }],
        returnPrice: [
          { required: true, message: "Please Input退款Money", trigger: "blur" }
        ]
      },
      formHandle: [
        {
          label: "Cancel",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmit()
        }
      ]
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let res = await this.api.shopaftersaleDetail({
        id: this.$route.query.id
      });
      if (res) {
        this.ListData = res.data.order;
        this.ListDataFeiyong = res.data.order;
        this.ListDataFencheng = res.data.bonus;
        this.ListDataShouhou = res.data.afterSale[0];
        this.ListDataHexiao = res.data.order;
        this.tableDataLog = res.data.orderLog;
        this.tableData = JSON.parse(res.data.order.productInfor);
        console.log(JSON.parse(res.data.order.productInfor));
        let sum = 0;
        this.tableData.map(item => {
          sum += item.subtotal;
        });
        this.tableBottom.content = "￥" + sum;
        this.videoUrl = res.data.videoUrl;
        this.ListDataShouhou.picture =
          this.ListDataShouhou && this.ListDataShouhou.picture.split(",");

        // console.log(JSON.parse(res.data.order.productInfor));
      }
    },
    showFrom() {
      this.$prompt(
        `Please Input退款Money(PaymentMoney:${this.ListData.actuallyPaidMoney})`,
        "Hint",
        {
          confirmButtonText: "Confirm退款",
          cancelButtonText: "拒绝退款",
          cancelButtonClass: "bg_danger",
          distinguishCancelAndClose: true
          // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          // inputErrorMessage: '邮箱格式不正确'
        }
      )
        .then(async ({ value }) => {
          let res = await this.api.shoporderRefund({
            id: this.ListDataShouhou.id,
            state: 1,
            refundMoney: value
          });
          if (res) {
            this.$message({
              type: "success",
              message: "退款Success"
            });
            this.init();
          }
        })
        .catch(async action => {
          if (action == "cancel") {
            let res = await this.api.shoporderRefund({
              id: this.ListDataShouhou.id,
              state: 2
            });
            if (res) {
              this.$message({
                type: "info",
                message: action === "cancel" ? "处理Success" : ""
              });
              this.init();
            }
          }
        });
    }
  }
};
</script>
<style lang="scss">
.bg_danger {
  background: red;
  color: #fff;
}
</style>
